// 没有list的el-upload上传组件
<template>
  <div class="m-upload">
    <el-upload
      v-bind="$attrs"
      v-on="$listeners"
      :accept="fileType"
      action=""
      :show-file-list="false"
      :auto-upload="false"
      :multiple="false"
      :on-change="fileHandleChange"
      :disabled="upLoadDisabled"
    >
      <el-button size="small" type="primary" v-if="buttonText.length != 0">{{
        buttonText
      }}</el-button>
      <slot name="in-upload"></slot>
      <div slot="tip">
        <slot name="tip-solt"></slot>
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "XUpload",
  props: {
    // 上传文件大小限制
    fileCapacity: {
      type: Number,
      default: () => 2,
    },
    // 上传文件类型限制
    fileType: {
      type: String,
      default: () => ".jpg,.png,.jpeg",
    },
    buttonText: {
      type: String,
      default: () => "",
    },
    upLoadDisabled: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {},
  mounted() {},

  methods: {
    // 文件触发
    async fileHandleChange(file) {
      const list = file.name.split(".");
      const isFile = this.fileType.includes(list[1]);
      const isSize = file.size / 1024 / 1024 < this.fileCapacity;
      if (!isFile) {
        return this.$message.error(`请选择${this.fileType}文件上传`);
      }
      if (!isSize) {
        return this.$message.error(`文件不得大于${this.fileCapacity}M！`);
      }
      this.$emit("uploadFile", file.raw);
    },
  },
};
</script>

<style lang="scss">
.m-upload {
  display: inline-flex;
}
</style>

/**用法

<x-up-load
  :fileCapacity="5"
  @uploadFile="uploadFile"
  :upLoadDisabled="rzUrl.length != 0"
>
            <div slot="in-upload">
              <img-preview
                :imgUrlList="[rzUrl]"
                imgStyle="120px"
                v-if="rzUrl"
                @imageClosedHandle="$emit('imageClose', 2)"
              ></img-preview>
              <avatar-icon iconStyle="80px" v-else></avatar-icon>
            </div>
            <div slot="tip-solt" class="upload-explain">
              可接受格式为：jpg、jpeg、png，图片大小不超过5M；
              <br />
              上传加盖公章的入驻申请书。
            </div>
          </x-up-load>
methods: // file 就是文件对象 uploadFile1(file) { this.$emit("getUploadFile",
file: file ); }, */
